<template>
	<view>
		<!-- <view style="position: sticky;top: 0;z-index: 9999;">
			<view class="status_bar" :style="menuButton?`height:${menuButton.top}px`:''"></view>
			<view class="navBar" :style="menuButton?`height:${menuButton.height}px;width:${menuButton.left}px`:''">
				<view style="display: flex;width: 100%;align-items: center;">
					<view @click="backPage" style="padding-left: 30rpx;flex-shrink: 0;"><uni-icons color="#666"
							type="back" size="45rpx"></uni-icons></view>
					<view style="font-weight: 600;font-size: 35rpx;width: 100%;text-align: center;">观看历史</view>
					<view @click="edit" style="padding-right: 30rpx;font-size: 30rpx;flex-shrink: 0;color: #666;">
						编辑
					</view>
				</view>
			</view>
		</view> -->
		<view style="padding: 30rpx;">
			<view v-if="playHistry.length==0">
				<uv-empty mode="history" icon="https://cdn.uviewui.com/uview/empty/history.png"></uv-empty>
			</view>
			<view v-for="(p,i) in playHistry" :key="i" @click="toInfoPage(p)">
				<view style="display: flex;align-items: center;margin-bottom: 30rpx;">
					<view
						style="width: 250rpx;height: 150rpx;border-radius: 20rpx;flex-shrink: 0;overflow: hidden;position: relative;">
						<image :src="p.vod_img" style="width: 100%;height: 100%;" mode="aspectFill"></image>
						<view
							style="position: absolute;left: 0;bottom: 0;background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 255));width: 100%;">
							<view style="position: absolute;bottom: 0;left: 0;background: #00d1d1;height: 5rpx;"
								:style="true?`width:calc(250rpx * ${p.currentTime/p.duration})`:''">
							</view>
						</view>
					</view>
					<view style="width: 100%;padding-left: 20rpx;font-size: 25rpx;color: #666;">
						<p style="font-size: 30rpx;font-weight: 600;color: #000;margin-bottom: 20rpx;">
							{{p.vod_name}}
						</p>
						<p>{{p.episode_name}}</p>
						<p>观看至{{parseInt(p.currentTime/p.duration*100)}}%</p>
						<!-- <text>{{p.vod_name}} {{p.name}}</text> -->
					</view>
				</view>
			</view>
		</view>
		<uv-loading-page :loading="loading" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
	</view>
</template>

<script>
	import userInfo from '@/static/userInfo.js'
	export default {
		data() {
			return {
				playHistry: [],
				menuButton: null,
				loading: true
			}
		},
		async onReady() {
			this.playHistry = await userInfo.watchHistry()
			this.loading = false
		},
		onShow: async function(res) {
			//各平台适配
			//#ifndef APP-PLUS || H5
			this.menuButton = uni.getMenuButtonBoundingClientRect()
			//#endif 
		},
		methods: {
			edit() {
				uni.showToast({
					title: '不想写了',
					duration: 2000,
					icon: 'error'
				});
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			toInfoPage(e) {
				//跳转播放
				uni.navigateTo({
					url: '/pages/videoInfo/videoInfo?id=' + e.vod_id
				})
			},
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background: #fff;
	}

	.navBar {
		width: 100vw;
		height: 80rpx;
		background: #fff;
	}
</style>